<template>
	<div class="p-grid panel-demo">
		<div class="p-col-12">
			<div class="card">
				<h5>工具栏</h5>
				<Toolbar>
					<template slot="left">
						<Button label="新建" icon="pi pi-plus" style="margin-right: .5em"/>
						<Button label="打开" icon="pi pi-folder-open" class="p-button-secondary"/>

						<i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em"></i>

						<Button icon="pi pi-check" class="p-button-success" style="margin-right: .5em"/>
						<Button icon="pi pi-trash" class="p-button-warning" style="margin-right: .5em"/>
						<Button icon="pi pi-print" class="p-button-danger"/>
					</template>
					<template slot="right">
						<SplitButton label="选项" :model="toolbarItems"></SplitButton>
					</template>
				</Toolbar>
			</div>
		</div>
		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>AccordionPanel 手风琴面板</h5>
				<Accordion>
					<AccordionTab header="标题一" :active="true">
						<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞 将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大 雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿 海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。 秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异 之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更 衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段 珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让， 呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
					</AccordionTab>
					<AccordionTab header="标题二">
						<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞 将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大 雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿 海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。 秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异 之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更 衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段 珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让， 呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
					</AccordionTab>
					<AccordionTab header="标题三">
						<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞 将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大 雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿 海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。 秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异 之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更 衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段 珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让， 呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
					</AccordionTab>
				</Accordion>
			</div>
			<div class="card">
				<h5>TabView 标签页</h5>
				<TabView>
					<TabPanel header="标题一">
						<p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞 将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大 雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿 海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。 秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异 之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更 衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段 珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让， 呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p></TabPanel>
					<TabPanel header="标题二 II">
						<p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入 山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名 《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老 人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号 为“太平道人”。中平元年正月内，疫气流行，张角散施符水，为人治病，自称“大贤良 师”。角有徒弟五百余人，云游四方，皆能书符念咒。次后徒众日多，角乃立三十六方，大 方万余人，小方六七千，各立渠帅，称为将军；讹言：“苍天已死，黄天当立；岁在甲子， 天下大吉。”令人各以白土书“甲子”二字于家中大门上。青、幽、徐、冀、荆、扬、兖、 豫八州之人，家家侍奉大贤良师张角名字。角遣其党马元义，暗赍金帛，结交中涓封谞，以 为内应。角与二弟商议曰：“至难得者，民心也。今民心已顺，若不乘势取天下，诚为可 惜。”遂一面私造黄旗，约期举事；一面使弟子唐周，驰书报封谞。唐周乃径赴省中告变。 帝召大将军何进调兵擒马元义，斩之；次收封谞等一干人下狱。张角闻知事露，星夜举兵， 自称“天公将军”，张宝称“地公将军”，张梁称“人公将军”。申言于众曰：“今汉运将 终，大圣人出。汝等皆宜顺天从正，以乐太平。”四方百姓，裹黄巾从张角反者四五十万。 贼势浩大，官军望风而靡。何进奏帝火速降诏，令各处备御，讨贼立功。一面遣中郎将卢 植、皇甫嵩、朱儁，各引精兵、分三路讨之。</p>
					</TabPanel>
					<TabPanel header="标题三">
						<p>且说张角一军，前犯幽州界分。幽州太守刘焉，乃江夏竟陵人氏，汉鲁恭王之后也。当 时闻得贼兵将至，召校尉邹靖计议。靖曰：“贼兵众，我兵寡，明公宜作速招军应敌。”刘 焉然其说，随即出榜招募义兵。 榜文行到涿县，引出涿县中一个英雄。那人不甚好读书；性宽和，寡言语，喜怒不形于 色；素有大志，专好结交天下豪杰；生得身长七尺五寸，两耳垂肩，双手过膝，目能自顾其 耳，面如冠玉，唇若涂脂；中山靖王刘胜之后，汉景帝阁下玄孙，姓刘名备，字玄德。昔刘 胜之子刘贞，汉武时封涿鹿亭侯，后坐酎金失侯，因此遗这一枝在涿县。玄德祖刘雄，父刘 弘。弘曾举孝廉，亦尝作吏，早丧。玄德幼孤，事母至孝；家贫，贩屦织席为业。家住本县 楼桑村。其家之东南，有一大桑树，高五丈余，遥望之，童童如车盖。相者云：“此家必出 贵人。”玄德幼时，与乡中小儿戏于树下，曰：“我为天子，当乘此车盖。”叔父刘元起奇 其言，曰：“此儿非常人也！”因见玄德家贫，常资给之。年十五岁，母使游学，尝师事郑 玄、卢植，与公孙瓒等为友。</p>
					</TabPanel>
				</TabView>
			</div>
		</div>
		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>Panel 面板</h5>
				<Panel header="木兰花" :toggleable="true">
					<p>人生若只如初见，何事秋风悲画扇。 等闲变却故人心，却道故人心易变。 骊山语罢清宵半，泪雨霖铃终不怨。 何如薄幸锦衣郎，比翼连枝当日愿。</p>
				</Panel>
			</div>
			<div class="card">
				<h5>Fieldset 分组</h5>
				<Fieldset legend="江城子·乙卯正月二十日夜记梦" :toggleable="true">
					<p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。 夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈</p>
				</Fieldset>
			</div>
			<div class="card">
				<Card>
					<template slot="title">
						<h5>面板 Card</h5>
						<Button icon="pi pi-plus" class="p-button-text"/>
					</template>

					<template slot="subtitle">
						副标题
					</template>

					<template slot="content">
						<p>《快乐大本营》是湖南卫视推出的嘉宾访谈游戏节目。他由何炅、谢娜、李维嘉、吴昕和杜海涛担任主持。节目主要以游戏为主，辅以歌舞和各种形式的节目。每个展览都是为艺术家们设计自己的主题。湖南卫视于1997年7月5日20:15开始播出《快乐大本营》，每周六晚20:15播出。在某种程度上，它彻底改变了综艺节目。</p>
					</template>
				</Card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				toolbarItems: [
					{
						label: 'Save',
						icon: 'pi pi-check'
					},
					{
						label: 'Update',
						icon: 'pi pi-upload'
					},
					{
						label: 'Delete',
						icon: 'pi pi-trash'
					},
					{
						label: 'Home Page',
						icon: 'pi pi-home'
					},
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	p {
		line-height: 1.5;
		margin: 0;
	}

	/deep/ .p-card .p-card-title {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-bottom: 0;
	}
</style>
